<template>
  <div class="account-info">
    <div class="title">账号信息</div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      label-position="right"
      label-width="100px"
      class="supplier-form height55">
      <el-row :gutter="20" class="dividing">
        <el-col :span="12">
          <el-form-item label="下单平台：" prop="platformName" style="margin-bottom: 0px;">
            <div class="plateform">
              <platformIcon :data="accountsInfo.platformName" />
              <ToolTip :content="accountsInfo.platformName" placement="top-start"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号：" prop="accountName" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.accountName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="链接：" prop="link" style="margin-bottom: 0px;">
            <div v-if="accountsInfo.link && (accountsInfo.link.indexOf('http://') === 0 || accountsInfo.link.indexOf('https://') === 0)">
              <el-tooltip :open-delay="500" class="item" placement="top-start" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ accountsInfo.link }}</div>
                <a
                  :href="accountsInfo.link"
                  target="_blank"
                  class="name link-name">
                  点击跳转<img src="../../../assets/medium/link.png" alt="">
                </a>
              </el-tooltip>
            </div>
            <el-tooltip v-else :open-delay="500" class="item" placement="top-start" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ accountsInfo.link || '--' }}</div>
              <div class="content">{{ accountsInfo.link || "--" }}</div>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号ID：" prop="accountCode" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.accountCode" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="粉丝数：" prop="fansNum" style="margin-bottom: 0px;">
            <ToolTip :content="numFormat(accountsInfo.fansNum,true,1,'万')" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接单偏好：" prop="reason" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.preference" placement="top-start"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="标签：" prop="tagName" style="margin-bottom: 0px;">
          <TagSelect v-model="accountsInfo.tagName" mode="detail" />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import platformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import { format } from '@/filters/date';
import { numFormat } from '@/filters/number';

export default {
  components: {
    Title,
    FileShowList,
    platformIcon,
    TagSelect
  },
  props: {
    accountsInfo: {
      type: Object,
      default: () => { return {}; }
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      numFormat
    };
  },
  computed: {
  },
  methods: {
    format,
    // 打开资源，搜索标签
    openResourceLabel(label) {
      const url = this.$router.resolve({
        name: 'Medium',
        query: {
          label
        }
      });
      window.open(url.href, '_blank');
    },

    editSignPointFun(defaultVal) {
      this.editSignPoint = true;
      this.editSignPointContent = defaultVal || defaultVal === 0 ? defaultVal : undefined;
    }
  }
};
</script>
<style lang="scss" scoped>
  .dividing{
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
  .account-info{
    ::v-deep {
      .el-form-item {
        .el-form-item__label {
          color: #999999 !important;
        }
      }
    }

    .title{
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 16px;
      margin:0px 0 7px 10px;
    }
    color: #333333;
    .plateform{
      display: flex;
      flex-wrap: nowrap;
    }
    .link-name {
      display: flex;
      align-items:center;
      color: #406eff;
      img {
        position: relative;
        top: 1px;
        width: 11px;
        margin-left: 3px;
      }
      .el-icon-link {
        font-size: 12px;
      }
    }
  }
  .signPoint-edit {
    display: flex;
    align-items: center;
    position: relative;
    .button-text {
      margin-left: 5px;
    }
  }
.mock-input {
  &::v-deep {
    .el-input-number__increase,.el-input-number__decrease {
      display: none;
    }
    .el-input__inner {
      text-align: left;
      padding-left: 8px;
      padding-right: 73px;
    }
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-input__inner {
      width: 240px;
    }
  }
}
.input-btn {
  position: absolute;
  right: 0;
  padding: 0 5px;
  z-index: 10;
  .el-icon-check {
    cursor: pointer;
    font-size: 15px;
    color: #406EFF;
  }
  .el-icon-close {
    cursor: pointer;
    font-size: 15px;
  }
}
.mobile-el-form {
  .label-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
